import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  FlatList,
  TouchableOpacity,
  Dimensions,
} from 'react-native';

import { DrawerNavigator } from 'react-navigation'


import { getRequest } from '../../tools/network';

import HomeCarousel from './carousel';
import { HomeCell } from './cell';
// import { HomeHeader } from './header';
import HomeHeader from './header';


class home extends Component {
  state = {
    newsJson: '',
    headerBGcolor: 'transparent'
  }

  static navigationOptions = {
    header: null,
  };

  componentDidMount() {
    var url = 'https://news-at.zhihu.com/api/4/news/latest';

    getRequest(url, function (json) {
      this.setState({
        newsJson: json
      })
    }.bind(this));
  }

  render() {
    var dataSourceArray = [];
    var topSourceArray = [];
    if (this.state.newsJson) {
      dataSourceArray = this.state.newsJson.stories;
      topSourceArray = this.state.newsJson.top_stories;
    }

    var navigation = this.props.navigation;

    return (
      <View
        style={
          style.content
        }>
        <FlatList
          style={
            style.content
          }
          data={
            dataSourceArray
          }
          keyExtractor={(item) => item.id}
          onScroll={(event) => {
            {/* console.log(event.nativeEvent.contentOffset.x);//水平滚动距离 
            console.log(event.nativeEvent.contentOffset.y);//垂直滚动距离       */}

            y = event.nativeEvent.contentOffset.y / 200;
            y = y > 1 ? 1 : y;
            var temp = 'rgba(15, 136, 235, ' + y + ')';


            console.log('====================================');
            console.log(this.state.headerBGcolor);
            console.log('====================================');

            this.setState({
              headerBGcolor: temp
            });
          }}
          onRefresh={() => {
            console.log('====================================');
            console.log('refresh');
            console.log('====================================');

            var url = 'https://news-at.zhihu.com/api/4/news/latest';

            getRequest(url, function (json) {
              this.setState({
                newsJson: json
              })
            }.bind(this));
          }}
          refreshing={false}
          ListHeaderComponent={() =>
            <View>
              <HomeCarousel
                data={topSourceArray}
                navigation={navigation}
              />
            </View>
          }
          renderItem={({ item }) =>
            <HomeCell
              onPress={() => navigation.navigate('News', { id: item.id })}
              item={item}
            />
          }
        />


        <View
          style={
            [style.header,
            { backgroundColor: this.state.headerBGcolor }]
          }
        >
          <Text 
            style={ style.title } 
          >
            今日热闻
          </Text>
        </View>
      </View>
    );
  }
}

export default home;



var style = {
  content: {
    flex: 1,
    // marginTop: 10,
    backgroundColor: 'white',
  },

  header: {
    position: 'absolute',
    height: 50,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },

  title: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
    top: 7,
  },
}